<template>
  <div class="login">
    <el-card class="box-card">
      <span>用户-登录</span>
      <avue-form
        class="login_from"
        ref="form"
        :option="option"
        v-model="obj"
        @submit="submit"
      >
        <template slot="img">
          <div class="code">
            <img :src="captcha.img" alt="验证码" @click="getCode" />
          </div>
        </template>
      </avue-form>
      <!-- 自定义按钮 -->
      <el-button type="primary" size="small" plain @click="$refs.form.submit()"
        >登录</el-button
      >
      <span style="margin-left: 3%; text-align: center; font-size: 12px">
        <router-link to="/register">没有账号</router-link>
      </span>
      <span class="otherLogin">
        <el-popover placement="top-start" title="" width="200" trigger="hover">
          <el-tooltip
            class="item"
            effect="dark"
            content="gitee登录"
            placement="top-start"
          >
            <a :href="giteeLoginUrl">
              <el-avatar :size="30">
                <img src="../../assets/images/giteelog.png" />
              </el-avatar>
            </a>
          </el-tooltip>
          <el-button
            slot="reference"
            circle
            icon="el-icon-more"
            type="primary"
          ></el-button>
        </el-popover>
      </span>
    </el-card>
    <div class="record">
      <a href="https://beian.miit.gov.cn/" target="_blank"
        >备案号： 蜀ICP备19022468号-2</a
      >
    </div>
  </div>
</template>
<script>
import { login, getCode, giteeUrl } from "@/services/login";
export default {
  data() {
    return {
      obj: {
        userName:"zhangsan",
        password:"zhangsan"
      },
      option: {
        width: 400,
        time: 60,
        submitBtn: false,
        emptyBtn: false,
        menuPosition: "100px",
        column: [
          {
            row: true,
            maxlength: 32,
            showWordLimit: true,
            span: 20,
            prop: "userName",
            label: "用户名",
            autocomplete: "off",
            rules: [
              { required: true, message: "请输入用户名", trigger: "blur" },
            ],
          },
          {
            span: 20,
            prop: "password",
            label: "密码",
            type: "password",
            showPassword: true,
            autocomplete: "off",
            rules: [{ required: true, message: "请输入密码", trigger: "blur" }],
          },
          {
            span: 14,
            prop: "code",
            label: "验证码",
            autocomplete: "off",
            rules: [
              { required: true, message: "请输入验证码", trigger: "blur" },
            ],
          },
          {
            span: 6,
            labelWidth: 0,
            prop: "img",
          },
        ],
      },
      captcha: {},
      giteeLoginUrl: "",
    };
  },
  mounted() {
    this.getCode();
    this.giteeUrl();
  },
  methods: {
    submit(form, done) {
      this.obj.codeKey = this.captcha.uuid;
      this.obj.type = 0;
      login(this.obj)
        .then((res) => {
          let userData = {
            username: res.data.username, //账号
            fullName: res.data.fullName, // 姓名
            headPic: res.data.headPic, // 头像
            endTime: res.data.endTime, //最新登录时间
            roleName: res.data.roleName, //角色
          };
          sessionStorage.setItem("userData", JSON.stringify(userData));
          this.$router.push("/");
        })
        .catch((err) => {
          this.getCode();
          done(form);
        });
    },
    getCode() {
      getCode()
        .then((res) => {
          this.captcha = res.data;
        })
        .catch((error) => {});
    },
    giteeUrl() {
      giteeUrl("admin")
        .then((res) => {
          this.giteeLoginUrl = res.data;
        })
        .catch((error) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.login_from {
  margin-top: 2%;
}
.box-card {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 30%;
  overflow: visible;
  width: 40%;
  height: 40%;
  margin-top: 15%;
  text-align: center;
}

.login {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: url("../../assets/images/login-2.webp");
  background-size: cover;
}
.record {
  text-align: right;
  margin-bottom: 1%;
  margin-right: 1%;
  a {
    text-decoration: none;
  }
}
.otherLogin {
  margin-left: 3%;
  text-align: center;
  font-size: 12px;
}
.otherLogin:hover {
  cursor: pointer;
}
.login_avatar:hover {
  cursor: pointer;
}
</style>
